import React, { useState, useEffect } from 'react';
// import news from '../../../../constant/news.svg';
import news from '../../../../constant/news.svg'

const ImgLoader = (props: any) => {
  const { src, ...others } = props;
  const [showSrc, setShowSrc] = useState(news);
  const [error, setError] = useState(false);
  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setShowSrc(src);
    };
    img.onerror = () => {
      setShowSrc(news);
      setError(true);
    };
  }, []);

  return (
    <>
      <img src={showSrc} {...others}  style={{
        padding: error ? '32px 0' : 'unset'
      }} />
    </>
  );
}

export default ImgLoader;
